<!DOCTYPE html>
<html>

<head>
  <script src="/konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva Drop Events Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <h3>
    Group 拖拽
  </h3>
  <hr>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    // 舞台
    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    })

    // 图层
    var layer = new Konva.Layer()

    // 添加图层
    stage.add(layer)

    // 临时图层
    var tempLayer = new Konva.Layer()
    stage.add(tempLayer)

    // 添加文本
    var text = new Konva.Text({
      fontSize: 26,
      fontFamily: 'Calibri',
      fill: 'red',
      padding: 10,
      text: '提示: 拖拽文本到层中',
      draggable: true,
      // shadowOffsetX: 5,
      // shadowOffsetY: 5,
      // shadowColor: '#000'
    })
    layer.add(text)

    var star
    for (var i = 0; i < 10; i++) {
      star = new Konva.Star({
        x: stage.width() * Math.random(),
        y: stage.height() * Math.random(),
        fill: 'blue',
        numPoints: 10,
        innerRadius: 20,
        outerRadius: 25,
        draggable: true,
        name: 'star ' + i,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        shadowColor: '#01ef00'
      })
      layer.add(star)
    }
    layer.draw()

    // 当拖拽开始时触发的事件
    stage.on('dragstart', function (e) {
      e.target.moveTo(tempLayer) // 将拖拽的对象移动到临时图层
      text.text('Moving ' + e.target.name())
      layer.draw() // 刷新图层
    })

    // 存储上一个拖拽中的形状对象
    var previousShape

    // 当拖拽中时触发的事件
    stage.on('dragmove', function (evt) {


      // 获取鼠标指针的当前位置
      var pos = stage.getPointerPosition()

      // 获取该位置下的图层上的形状对象
      var shape = layer.getIntersection(pos)
      console.log('%c [  ]-88', 'font-size:13px; background:pink; color:#bf2c9f;', shape)
      console.log('%c [ previousShape ]-88', 'font-size:13px; background:pink; color:#bf2c9f;', previousShape)


      // 当前对象被拖拽，且有新的形状对象被检测到
      if (previousShape && shape) {
        // 目标形状对象已改变
        if (previousShape !== shape) {

          // 触发上一个形状对象的 dragleave 事件，表示离开旧目标
          previousShape.fire(
            'dragleave',
            {
              type: 'dragleave',
              target: previousShape,
              evt: evt.evt
            },
            true
          )

          // 触发新的形状对象的 dragenter 事件，表示进入新目标
          shape.fire(
            'dragenter',
            {
              type: 'dragenter',
              target: shape,
              evt: evt.evt
            },
            true
          )
          previousShape = shape
        } else {
          // 触发上一个形状对象的 dragover 事件，表示拖拽在目标上方
          previousShape.fire(
            'dragover',
            {
              type: 'dragover',
              target: previousShape,
              evt: evt.evt
            },
            true
          )
        }
        // 之前没有形状对象被拖拽，但现在有形状对象被检测到
      } else if (!previousShape && shape) {

        previousShape = shape

        console.log('%c [  ]-128', 'font-size:13px; background:pink; color:#bf2c9f;', previousShape)
        // 触发新的形状对象的 dragenter 事件，表示进入新目标
        shape.fire(
          'dragenter',
          {
            type: 'dragenter',
            target: shape,
            evt: evt.evt
          },
          true
        )
        // 之前有形状对象被拖拽，但现在没有形状对象被检测到
      } else if (previousShape && !shape) {

        // 触发上一个形状对象的 dragleave 事件，表示离开旧目标
        previousShape.fire(
          'dragleave',
          {
            type: 'dragleave',
            target: previousShape,
            evt: evt.evt
          },
          true
        )
        previousShape = undefined
      }
    })
    // 当拖拽结束时触发的事件
    stage.on('dragend', function (e) {
      e.target.fill('red') // 拖拽结束后修改对象的填充颜色
      var pos = stage.getPointerPosition()
      var shape = layer.getIntersection(pos)
      if (shape) {
        previousShape.fire(
          'drop',
          {
            type: 'drop',
            target: previousShape,
            evt: e.evt
          },
          true
        )
      }
      previousShape = undefined
      e.target.moveTo(layer)   // 将对象移回到图层
      layer.draw()
      tempLayer.draw()
    })
    // 当进入拖拽目标时触发的事件
    stage.on('dragenter', function (e) {
      e.target.fill('green')  // 修改进入目标时的填充颜色
      text.text('dragenter ' + e.target.name())
      layer.draw()
    })

    // 当离开拖拽目标时触发的事件
    stage.on('dragleave', function (e) {
      e.target.fill('blue')  // 修改离开目标时的填充颜色
      text.text('dragleave ' + e.target.name() + ' ' + previousShape.name())
      layer.draw()
    })

    // 当拖拽在 目标上方时触发的事件
    stage.on('dragover', function (e) {
      e.target.fill('yellow')
      text.text('dragover ' + e.target.name())
      layer.draw()
    })

    // 当拖拽释 放在目标上时触发的事件
    stage.on('drop', function (e) {
      e.target.fill('red')
      text.text('drop ' + e.target.name())
      layer.draw()
      // layer.batchDraw()
    });
  </script>
</body>

</html>